<ion-header style="opacity:0.4">
  <ion-toolbar >
    <ion-title>
      注册
    </ion-title>


      <ion-icon name="arrow-dropleft" (click)="dismiss()" style="text-align: left;font-size: 30px" ></ion-icon>


  </ion-toolbar>
</ion-header>

<ion-content padding id="bg-img" >
  <ion-grid>


<!----------------------------------注册内容-->
    <ion-row>
      <ion-col col-12 style="top: 20px" >
        <img src="../../assets/images/welcome.png" alt="">

        <form  [formGroup]="registerForm" (ngSubmit)="register(registerForm.value)" novalidate>
          <!-------------------------手机号--------------------------->
          <ion-item [class.error]="!username.valid && username.touched" >
            <ion-input type="text" placeholder="请输入手机号"  [formControl]="username" ></ion-input>
          </ion-item>

          <ion-label *ngIf="username.hasError('required') && username.touched" class="error-message">  手机号不能为空 </ion-label>
          <ion-label *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message"> 请输入正确的电话号码</ion-label>


          <!-------------------------验证码--------------------------->

          <ion-item [class.error]="!idcode.valid && idcode.touched">
            <ion-input type="text" placeholder="请输入验证码"  [formControl]="idcode" clearInput=true></ion-input>
          </ion-item>

          <ion-label *ngIf="idcode.hasError('required') && idcode.touched" class="error-message">  验证码不能为空 </ion-label>
          <ion-label *ngIf="(idcode.hasError('minlength')||idcode.hasError('maxlength')) && idcode.touched" class="error-message">验证码格式错误</ion-label>

          <!-------------------------密码--------------------------->
          <ion-item>
            <ion-input type="password" placeholder="请输入密码"  [formControl]="password" clearInput=true ></ion-input>
          </ion-item>
          <ion-label *ngIf="password.hasError('required') && password.touched" class="error-message">请输入密码</ion-label>
          <ion-label *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">密码长度最少为六位</ion-label>


          <br>
          <button ion-button block color="secondary" type="submit" [disabled]="!registerForm.valid" id="register-button">提交</button>
<!------------------------验证码按妞妞-->
          <button ion-button type="button" round outline small id="idcode-bt"  (click)="getCode()"  *ngIf="username.valid">{{code_mes}}</button>
        </form>

      </ion-col>

    </ion-row>


  </ion-grid>

  <ion-footer >
    <ion-toolbar style="background-color: white !important;">
      <p style="text-align: center;text-decoration: none"><a href="#">登录/注册即代表同意《安家用户使用协议》</a></p>

    </ion-toolbar>
  </ion-footer>

</ion-content>
